<template>
    <div class="context">
        <div class="layout">
            <Menu  mode="horizontal" theme="dark">
                 <div class="layout-logo">游戏资讯分享平台</div>
            </Menu>
        </div>

        <div>
            <div class="kuang">
                <Form ref="formInline" :model="formInline" :rules="ruleInline" >
                    <Form-item prop="user">
                        账号：<Input type="text" id="Username" v-model="formInline.user" placeholder="Username"/>
                    </Form-item>
                    <Form-item prop="password">
                        密码：<Input type="password" id="password" v-model="formInline.password" placeholder="Password"/>
                    </Form-item>
                     <Form-item>
                        <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
                    </Form-item>
                     <Form-item>
                        <a @click="value3 = true" type="primary">注册账号</a>
                        <a @click="ManagerLogin('ManagerLogin')" type="primary">管理员登录</a>
                    </Form-item>
                </Form>
            </div>

           
            <!-- 个人注册 -->
              <div>
                <Drawer :closable="false"  width="840"  v-model="value3">
                    <p>注册个人账号</p>
                    <Divider />
                      <Form :model="personsFormItem" :rules="personsInline"  :label-width="80">
                        <FormItem label="姓名"  prop="username"> 
                            <Input v-model="personsFormItem.username" id="username" placeholder="(用作账号登录使用)"></Input>
                        </FormItem>
                        <FormItem label="性别"  prop="sex">
                            <Select v-model="personsFormItem.sex" id="sex">
                                <Option value="male">male(男性)</Option>
                                <Option value="female">female(女性)</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="电话"  prop="phone">
                            <Input v-model="personsFormItem.phone" id="phone" placeholder=""></Input>
                        </FormItem>
                        <FormItem label="邮箱"  prop="email">
                            <Input v-model="personsFormItem.email" id="email" placeholder=""></Input>
                        </FormItem>
                         <FormItem label="地址"  prop="zone">
                            <Input v-model="personsFormItem.zone" id="zone" placeholder=""></Input>
                        </FormItem>
                         <FormItem label="密码"  prop="password">
                            <Input v-model="personsFormItem.password" id="password" type="password" placeholder=""></Input>
                        </FormItem>
                         <FormItem label="角色"  prop="type">
                            <Select v-model="personsFormItem.type" id="type">
                                <Option value="学生">玩家</Option>
                                <Option value="教师">游戏商</Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="personsSubmit('personsFormItem')">Submit</Button>
                        </FormItem>
                    </Form>
                </Drawer>
            </div>

        </div>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        data () {
            return {
                list:[],
                formInline: {
                    user: 'gubaoer',
                    password: '666666'
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                },
                value3:false,
                value4:false,
                personsFormItem: {
                    username: '',
                    sex: '',
                    phone: '',
                    email: '',
                    zone: '',
                    password: '',
                    type:''
                },
                personsInline :{
                    username:[{required: true, message: '请填写用户名', trigger: 'blur' }],
                    sex:[{required: true, message: '请选择性别', trigger: 'blur' }],
                    phone:[{required: true, message: '请填写电话', trigger: 'blur' }],
                    email:[{required: true, message: '请填写邮箱', trigger: 'blur' }],
                    zone:[{required: true, message: '请填写地址', trigger: 'blur' }],
                    password:[{required: true, message: '请填写密码', trigger: 'blur' }],
                    type:[{required: true, message: '请选择类型', trigger: 'blur' }]
                },
                personsNum:0
            }
        },
        methods: {
            //登录
            handleSubmit(formInline) {
                this.upTitleAreaResult = this.formInline;
                var Username = this.upTitleAreaResult.user;
                var password = this.upTitleAreaResult.password;
                console.log(Username,password)
                axios('http://localhost:8081/login?username='+Username+'&password='+password).then((res) =>{
                    var sessionStorage = window.sessionStorage;  
                    sessionStorage.setItem('userId',res.data);
                    console.log(res.data);
                    if(res.data>0){
                        this.$Message.success('登录成功!');
                        this.$router.replace('/Home');
                    }else{
                        this.$Message.error('表单验证失败!');
                    }
                })
               
            },
            //添加人员
            personsSubmit(personsFormItem){
                if(this.personsFormItem.username == '' && 
                    this.personsFormItem.email == '' &&
                    this.personsFormItem.phone == '' &&
                    this.personsFormItem.sex == '' &&
                    this.personsFormItem.zone == '' &&
                    this.personsFormItem.password == '' &&
                    this.personsFormItem.type == ''
                    ){
                    this.$Message.error('请补全信息后提交!');
                }else{
                    console.log(this.personsFormItem);
                    let Persons = JSON.stringify({
                        username : this.personsFormItem.username,
                        email : this.personsFormItem.email,
                        phone : this.personsFormItem.phone,
                        sex : this.personsFormItem.sex,
                        zone :this.personsFormItem.zone,
                        password : this.personsFormItem.password,
                        type : this.personsFormItem.type
                });
                
                 axios.post('http://localhost:8081/personsAdd', Persons,{
                     headers: {
                         "Content-Type": "application/json;charset=utf-8"  
                         }
                        }) .then((res)=> {
                         this.personsNum = res.data;
                         this.value3=false;
                       if(this.personsNum==1){
                            this.$Modal.confirm({
                                title: '注册成功！',
                                loading: false
                            });
                        }else if(this.personsNum==3){
                            this.$Modal.confirm({
                                title: '您输入的用户名已存在！请重新输入！',
                                loading: false
                            });
                        }else{
                            this.$Modal.confirm({
                                title: '创建失败！',
                                loading: false
                            });
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                }
            },
            ManagerLogin(){
                 this.$router.push({
                path: `/ManagerLogin/` })
            }
        }
    }
</script>

<style>
body{
    background-image:url(../img/bg1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0px 0px;

}
.layout-logo{
    color: aliceblue;
    text-align: center;
    font-size: 20px;
    background-color:cornflowerblue;
}
.kuang{
    width: 200px;
    height: 100px;
    position: absolute;   
            top: 30%;   
            left: 43%;
    text-align: center;
    
}

</style>